# 3.35 WiFi Control

## 3.35.1 Overview

We control LED, buzzer, servo and the fan on the web page button wirelessly. 

## 3.35.2 Test Code

You can manually build blocks, or directly open the code file we provide: `3-35-Web Control Panel.ubp`. If you have any questions about how to open code files or upload code, please back to `1.9 Upload Code`.

**Build code blocks:**

1. In ![](./media/control.png), drag ![](./media/t1.png) to the script area.
2. Drag ![t195](./media/t195.png) and set the WIFI name to “LiuTest” and password to “88888888”.
3. Drag ![t196](./media/t196.png) and set the Web name to “CodingBox.local”.
4. Add ![t170](./media/t197.png) to refresh the data of each sensor on the Web page.
5. Add ![t198](./media/t198.png) and set the title to “Coding Box Web Panel”.

6. Use ![t206](./media/t206.png) to add a component that controls the display color of WS2812, and modify the blank behind “with selector” to `cbox_setAllNeoPixels`.
7. Use ![t204](./media/t204.png) to add a slider that controls the servo. Remain the name as default and set the range to 0-180, and modify the blank behind “with selector” to `cbox_setServo`.
8. Use ![t207](./media/t207.png) to add a button that controls the fan on. Set name as “Fan ON”, and modify the blank behind “with selector” to `cbox_setFan`. Click ![t219](./media/t219.png) to add a “params” blank.
9. In ![](./media/data.png), drag ![t217](./media/t217.png) and put it into the “params” blank of the ![t218](./media/t218.png), and modify “cat” to “100”.
10. Use ![t207](./media/t207.png) to add a button that controls the fan off. Set name as “Fan OFF”, and modify the blank behind “with selector” to `cbox_stopFan`.
11. Use ![t207](./media/t207.png) to add a button that controls the buzzer. Set name as “Buzzer”, and modify the blank behind “with selector” to `cbox_beep`. Click ![t219](./media/t219.png) to add a “params” blank, and put ![t217](./media/t217.png) in it and set to “100”.
12. Use ![t208](./media/t208.png) to add a button that controls the red LED. Set name as “Red LED”, and modify the blank behind “with selector” to `cbox_setLED`. Click ![t219](./media/t219.png) to add a “params” blank, and put ![t217](./media/t217.png) in it and set to “red”.
13. Use ![t208](./media/t208.png) to add a button that controls the yellow LED. Set name as “Yellow LED”, and modify the blank behind “with selector” to `cbox_setLED`. Click ![t219](./media/t219.png) to add a “params” blank, and put ![t217](./media/t217.png) in it and set to “yellow”.
14. Use ![t208](./media/t208.png) to add a button that controls the green LED. Set name as “Green LED”, and modify the blank behind “with selector” to `cbox_setLED`. Click ![t219](./media/t219.png) to add a “params” blank, and put ![t217](./media/t217.png) in it and set to “green”.

**Complete code:**

![t220](./media/t220.png)



## 3.35.3 Test Result

Connect the coding box to the MicroBlocks via USB or Bluetooth. Click ![t59](./media/t59.png) to upload code. After connecting to wifi, you can see an IP address: ![t212](./media/t212.png). Now connect your control device (mobile phone, tablet, computer) to the same wifi and search `codingbox.local` on the browser to enter the Web page. 

Slide the slider to control the servo angle. Click the color area below NeoPixels and then click the blank area to set the display color of WS2812. Click the “Fan ON” to turn on the Fan, and click the “Fan OFF” to turn it off. Click “Buzzer” and the buzzer will sound. 

Click “Red LED” to turn on the Red LED, and press again to turn off the red LED. For the “Yellow LED” and “Green LED”, they work in the same way, but the LED colors are different.

![image-20250714134304680](./media/image-20250714134304680.png)